import React, { useRef, useEffect, useState } from 'react'
import flvjs from 'flv.js'
import { EZUIKitPlayer } from 'ezuikit-js'
import './player.scss'
import { useSelector, useDispatch } from 'react-redux'
import { setFlvPlayerControl } from '@/store/modules/counter/slice'
const FlvPlayer = ({ url, id, name }) => {
  const videoRef = useRef(null)
  const flvPlayerRef = useRef(null)
  const dispatch = useDispatch()
  useEffect(() => {
    if (flvjs.isSupported() && url) {
      flvPlayerRef.current = flvjs.createPlayer({
        type: 'flv',
        url,
        isLive: true,
      })
      flvPlayerRef.current.attachMediaElement(videoRef.current)
      flvPlayerRef.current.load()
      dispatch(setFlvPlayerControl([flvPlayerRef.current]))
      // setTimeout(() => {
      //   flvPlayerRef.current.unload()
      //   flvPlayerRef.current.detachMediaElement()
      //   flvPlayerRef.current.destroy()
      // }, 5 * 60 * 1000)
      console.log('🚀 ~ flv播放器', flvPlayerRef.current)
    }

    return () => {
      console.log('清理？？')
      if (flvPlayerRef.current) {
        flvPlayerRef.current.unload()
        flvPlayerRef.current.detachMediaElement()
        flvPlayerRef.current.destroy()
      }
    }
  }, [url])

  return (
    <div>
      <div className="title">{name}</div>
      <div className="video-container">
        <video ref={videoRef} controls width="100%" id={`flv-video-${id}`} />
      </div>
    </div>
  )
}

const EzuiPlayer = ({ deviceInfo }) => {
  const containerRef = useRef(null)
  const [scriptLoaded, setScriptLoaded] = useState(false)

  useEffect(() => {
    // const script = document.createElement('script');
    // script.src = 'https://open.ys7.com/sdk/js/ezuikit-3.0.0.js';
    // script.onload = () => setScriptLoaded(true);
    // document.body.appendChild(script);
    setScriptLoaded(true)
    return () => {
      // document.body.removeChild(script);
    }
  }, [])
  const height = 400
  const width = 550
  useEffect(() => {
    if (scriptLoaded && deviceInfo) {
      const player = new EZUIKitPlayer({
        id: containerRef.current.id,
        accessToken: deviceInfo.token,
        url: deviceInfo.url,
        autoplay: true,
        width: width,
        height: height,
        themeData: {
          header: { isrender: 0 },
          footer: { isrender: 1 },
        },
      })

      return () => player.destroy()
    }
  }, [scriptLoaded, deviceInfo])

  return (
    <div>
      <div className="title">{deviceInfo.name}</div>
      <div
        ref={containerRef}
        style={{ width: '550px' }}
        id={`ezui-${deviceInfo.id}`}
        className="ezui-container"
      />
    </div>
  )
}

const MultiVideoPlayer = ({ videoSources }) => {
  console.log('videoSources', videoSources)
  return (
    <div className="video-wall">
      {videoSources.map((source, index) =>
        source.type === 'flv' ? (
          <FlvPlayer
            key={`flv-${index}`}
            name={source.name}
            url={source.url}
            id={index}
          />
        ) : (
          <EzuiPlayer key={`ezui-${index}`} deviceInfo={source} />
        )
      )}
    </div>
  )
}

export default MultiVideoPlayer
